package com.yangchoi.jetpackcompose.ui.main.page

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.hilt.navigation.compose.hiltViewModel
import androidx.navigation.NavHostController
import com.yangchoi.jetpackcompose.GlobalEvent
import com.yangchoi.jetpackcompose.LocalGlobalViewModel
import com.yangchoi.jetpackcompose.route.RouteKey
import com.yangchoi.jetpackcompose.theme.white_14sp
import com.yangchoi.jetpackcompose.theme.white_16sp
import com.yangchoi.jetpackcompose.ui.baseui.BaseComposePage
import com.yangchoi.jetpackcompose.ui.main.viewmodel.MineEvent
import com.yangchoi.jetpackcompose.ui.main.viewmodel.MineViewModel
import com.yangchoi.jetpackcompose.ui.widget.component.CommonButton
import com.yangchoi.jetpackcompose.ui.widget.component.CommonTopBar
import com.yangchoi.jetpackcompose.ui.widget.component.LoadNetWorkImage
import com.yangchoi.jetpackcompose.ui.widget.component.TestImgUrl
import com.yangchoi.lib_base.network.entity.UserConfigEntity
import com.yangchoi.lib_base.utils.DataStoreUtil
import kotlinx.coroutines.launch

@Composable
fun MinePage(navHostController: NavHostController,viewModel: MineViewModel = hiltViewModel()){

    val globalCurrent = LocalGlobalViewModel.current

    val viewState = viewModel.viewState
    val userInfo = viewState.userConfigEntity

    val scope = rememberCoroutineScope()

    BaseComposePage(
        topBarContent = {
            CommonTopBar(title = "个人中心", showBackIcon = false)
        },
        onResume = {
            viewModel.dispatch(event = MineEvent.OnInitMine)
        }
    ) {
        userInfo?.let {
            UserInfoContent(entity = userInfo)
        }

        LazyColumn{
            item {
                CommonButton(btnTitle = "退出登录", bgColor = Color.Black, titleStyle = TextStyle(color = Color.White, fontSize = 16.sp)) {
                    scope.launch {
                        DataStoreUtil.clear()
                        globalCurrent.dispatch(event = GlobalEvent.OnSetLoginState,isLogin = false, positionIndex = 0)
                        navHostController.popBackStack(RouteKey.HOME.toString(), inclusive = true)
                    }
                }
            }
        }
    }
}

@Composable
private fun UserInfoContent(entity: UserConfigEntity){
    ConstraintLayout(
        modifier = Modifier
            .fillMaxWidth()
            .height(200.dp)
            .background(color = Color.Blue.copy(alpha = 0.5f))
    ) {
        val (headImg,name,integral,level) = createRefs()

        LoadNetWorkImage(imgUrl = TestImgUrl, modifier = Modifier
            .size(100.dp)
            .clip(CircleShape)
            .constrainAs(headImg) {
                centerVerticallyTo(parent)
                start.linkTo(parent.start, 50.dp)
            }
        )

        Text(text = entity.userInfo.nickname, style = white_16sp, modifier = Modifier.constrainAs(name){
            start.linkTo(headImg.end,20.dp)
            top.linkTo(headImg.top,10.dp)
        })

        Text(text = "可用积分:${entity.coinInfo.coinCount}", style = white_14sp, modifier = Modifier.constrainAs(integral){
            start.linkTo(headImg.end,20.dp)
            bottom.linkTo(headImg.bottom,10.dp)
        })


    }
}